<template>
	<view class="footprintPage">
		<view class="funcButtonBox">
			<button v-if="!isEdit" @click="onClickEdit">编辑</button>
			<button v-else @click="onClickOk">完成</button>
		</view>
		<view class="showBox" v-for="info in infoList" :key='info.date'>
			<view class="showBoxDate">
				<text>{{info.date}}</text>
				<uni-icons v-if="!info.activeAll&&isEdit" type='circle' size='20' @click="()=>onClickSelectAll(info)"></uni-icons>
				<uni-icons v-if="info.activeAll&&isEdit" class='showItem-imgIcon' type="checkmarkempty" size="20" @click="()=>onClickCancelAll(info)"></uni-icons>
			</view>
			<view class="showBoxContent">
				<view class="showItem"  v-for="(item,index) in info.itemList" :key='index'>
					<view class="showItem-img">
						<image :src="item.itemUrl" mode=""></image>
						<view v-if="!item.active&&isEdit" class='showItem-imgIcon' @click="()=>onClickSelectOne(item,info)">
						</view>
						<uni-icons v-else-if="item.active&&isEdit" class='showItem-imgIcon' type="checkmarkempty" size="20" @click="()=>onClickCancelOne(item,info)"></uni-icons>
					</view>
					<view class="showItem-title">
						<text>{{item.itemTitle}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="hintNone">
			<text>没有更多了</text>
		</view>
		<view class="funcMainBox" v-if="isEdit">
			<view class="selectAll">
				<uni-icons v-if="isSelectAll&&isEdit" class='showItem-imgIcon' type="checkmarkempty" size="20" @click="()=>cancelAll()"></uni-icons>
				<uni-icons  v-else-if="!isSelectAll&&isEdit"  class='selectAllIcon' type='circle' size='20' @click="()=>selectAll()"></uni-icons>
				<text class="selectAllText">全选</text>
			</view>
			<view class="selected">
				已选：{{selectList.length}}
			</view>
			<view class="funcMainButtonBox">
				<button class="collectionButton" @click="()=>collectionSelected()">收藏</button>
				<button class="deleteButton" @click="()=>deleteSelected()">删除</button>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	
import {ref,reactive,computed,watch} from 'vue'

const isEdit=ref(false)

let isSelectAll=ref(false)

const onClickEdit=()=>{
	isEdit.value=true
}
const onClickOk=()=>{
	isEdit.value=false
}

let selectList=reactive([])

const onClickSelectAll=(info)=>{
	console.log(info)
		info.itemList.forEach((item,index)=>{
			item.active=true
		})
		info.activeAll=true
}

const onClickCancelAll=(info)=>{
		info.itemList.forEach((item,index)=>{
			item.active=false
		})
		info.activeAll=false
}

const onClickSelectOne=(item,info)=>{
	item.active=true
	let isOk=true
	info.itemList.forEach((item,index)=>{
		if(item.active===false){
			info.activeAll=false
			isOk=false
		}
	})
	if(isOk)info.activeAll=true
	
	selectList.push(item)
}

const onClickCancelOne=(item,info)=>{
	item.active=false
	info.activeAll=false
	selectList.forEach((item2,index)=>{
		if(item===item2){
			selectList.splice(index,1)
		}
	})
}

const selectAll=()=>{
	isSelectAll.value=true
	for(const key in infoList){
		infoList[key].activeAll=true
		infoList[key].itemList.forEach((item,index)=>{
			item.active=true
			selectList.push(item)
		})
	}
}

const cancelAll=()=>{
	isSelectAll.value=false
	for(const key in infoList){
		infoList[key].activeAll=false
		infoList[key].itemList.forEach((item,index)=>{
			item.active=false
		})
	}
	selectList.splice(0)
}

const collectionSelected=()=>{
	// 在这里写收藏的逻辑
}

const deleteSelected=()=>{
	//在这里写删除的逻辑，把selectList的东西删掉，然后遍历infoList，找到对应的，删除掉
}

const infoList=reactive([
	{
		date:'8月16日',
		activeAll:false,
		itemList:[
			{
				itemUrl:'../../../static/exam.jpg',
				itemTitle:'四级英语真题',
				active:false
			},
			{
				itemUrl:'../../../static/exam.jpg',
				itemTitle:'四级英语真题',
				active:false
			},
			{
				itemUrl:'../../../static/exam.jpg',
				itemTitle:'宿舍可折叠椅',
				active:false
			},
			{
				itemUrl:'../../../static/exam.jpg',
				itemTitle:'小埋抱枕',
				active:false
			}
		]
	},
	{
		date:'8月16日',
		activeAll:false,
		itemList:[
			{
				itemUrl:'../../../static/exam.jpg',
				itemTitle:'四级英语真题',
				active:false
			},
			{
				itemUrl:'../../../static/exam.jpg',
				itemTitle:'四级英语真题',
				active:false
			},
			{
				itemUrl:'../../../static/exam.jpg',
				itemTitle:'宿舍可折叠椅',
				active:false
			},
			{
				itemUrl:'../../../static/exam.jpg',
				itemTitle:'小埋抱枕',
				active:false
			}
		]
	},
	{
		date:'8月13日',
		activeAll:false,
		itemList:[
			{
				itemUrl:'../../../static/exam.jpg',
				itemTitle:'六级英语真题',
				active:false
			}
		]
	}
])



</script>

<style lang="less">
	.footprintPage{
		padding-top: 5vh;
		.funcButtonBox{
			width: 100vw;
			margin-left: auto;
			position: fixed;
			top: 5vh;
			height: calc(5vh + 10rpx);
			z-index: 999;
			padding-right: 20rpx;
			background-color: white;
			button{
				width: 130rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 90%;
				margin-left: auto;
				position: fixed;
				right: 20rpx;
				top: calc(5vh + 5rpx);
			}
		}
		.showBox{
			width: 94vw;
			margin-left: 3vw;
			.showBoxDate{
				font-size: 40rpx;
				padding: 10rpx;
			}
			.showBoxContent{
				display: grid;
				grid-template-columns: repeat(3,33%);
				.showItem{
					padding-top: 20rpx;
					padding-bottom: 20rpx;
					.showItem-img{
						text-align: center;
						image{
							display: inline-block;
							width: 28vw;
							height: 28vw;
						}
						position: relative;
						.showItem-imgIcon{
							position: absolute;
							top: 5%;
							right: 5%;
							background-color: aliceblue;
							border-radius: 100rpx;
							border: 1rpx solid black;
							height: 30rpx;
							width: 30rpx;
							line-height: 30rpx;
							text-align: center;
						}
					}
					.showItem-title{
						text-indent: 1em;
						font-size: 30rpx;
					}
					
				}
				
			}
		}
		.funcMainBox{
			display: grid;
			grid-template-columns: 25% 25% 50%;
			justify-self: center;
			align-items: center;
			text-align: center;
			position: fixed;
			background-color: white;
			bottom:0rpx;
			left: 0;
			padding-bottom: 40rpx;
			padding-top: 20rpx;
			width: 100vw;
			.funcMainButtonBox{
				display: flex;
				button{
					width: 130rpx;
					height: 70rpx;
					line-height: 70rpx;
					font-size: 90%;
				}
				.deleteButton{
					border: 1rpx red solid;
					color: red;
				}
			}
		}
		.hintNone{
			text-align: center;
			margin-top: 50rpx;
			padding-bottom: 140rpx;
			line-height: 100rpx;
			height: 100rpx;
		}
		
	}

</style>
